Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-101: Navigation Bar (Responsive Design Sans Search & Icons) #227

Merged
merged 2 commits into from
May 21, 2021
Merged

GH-101: Navigation Bar (Responsive Design Sans Search & Icons) #227

merged 2 commits into from
May 21, 2021

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented May 21, 2021 •
edited
Loading

Overview

  • Design the mobile navbar.
  • Better responsive design for header.
  • Technical improvements.

The search bar, icons, menu toggle, and mobile portal nav have not been re-styled yet.

Issues

Changes

Major:

  • New: Add compressed and expanded navbar styles in two files.
  • New: Increase body min-width (to prevent wrap of navbar toggle).
  • New: Remove condition for navbar breakpoint; now it's always 992px.
  • New: Migrate some s-header CSS to […].expanded and […].compressed.
  • New: Use top to position arrows isntead of margin.
  • New: Truncate nav links.
  • New: Style dropdowns.
  • New: Add nav link text span wrappers (to prevent truncation of menu arrows).
Minor
  • Minor: Remove branding images style that is made redundant.
  • Minor: Allow logo height less than 100% (for navbar).
  • Minor: Ensure navbar logo styles do not affect brand bar.
  • Minor: Give limited flexibility to navbar logo.
  • Minor: Use c-logo for branding images.

Testing

  • Resize screen.
  • Compare nav links and dropdown to design.
  • Ensure text or interface is never abruptly cut off.

Notes

Post-Merge Issues

  1. 4a918cd Nav bar menu toggle shows on desktop when in opened state.

@wesleyboar
GH-101: Header (Use .c-logo for Brand Bar Images)
28515e6 
- Remove branding images style that is made redundant.
- Allow logo height less than 100% (for navbar).
- Ensure navbar logo styles do not affect brand bar.
- Give limited flexibility to navbar logo.
- Use c-logo for branding images.
@wesleyboar
GH-101: Navigation Bar (Responsive Design)
c6bff3c 
- Add compressed and expanded styles in two files.
- Increase body min-width (to prevent wrap of navbar toggle).
- Remove condition for navbar breakpoint; now it's always 992px.
- Migrate some `s-header` CSS to `[…].expanded` and `[…].compressed`.
- Use `top` to position arrows isntead of `margin`.
- Truncate nav links.
- Style dropdowns.
- Add nav link text span wrappers (to prevent truncation of menu arrows).
@wesleyboar wesleyboar linked an issue May 21, 2021 that may be closed by this pull request
Header Redesign → FP-1458 #101
Closed
@wesleyboar wesleyboar self-assigned this May 21, 2021
@wesleyboar wesleyboar changed the title GH-101: Header (Use .c-logo for Brand Bar Images) GH-101: Navigation Bar (Responsive Design Sans Search & Icons) May 21, 2021
@wesleyboar wesleyboar merged commit c42d666 into task/GH-101-header-redesign May 21, 2021
@wesleyboar wesleyboar deleted the task/GH-101-header-redesign--mobile-nav branch May 21, 2021 21:34
@wesleyboar wesleyboar mentioned this pull request May 21, 2021
Draft
26 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@wesleyboar wesleyboar

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Header Redesign → FP-1458
1 participant
@wesleyboar